<template>
    <div class="main">
        <!-- <div class="header">
            <div class="head_left">
                <span class="lingliaodan" prop="requisitionID">领料单：</span>
                <span class="sp"></span>
            </div>                
            <div class="head_cent">
                <span class="gongdan">工单：</span>
                <el-input style="width:150px;" v-model="OrderBagId"></el-input> 
            </div>            
            <div class="head_right">
                <span class="gongwei">工位：</span>
                <el-select v-model="WorkstationId" clearable placeholder="请选择" @focus="onput">
                    <el-option
                        v-for="item in Workstationlist"
                        :key="item.WorkstationId"
                        :label="item.WorkstationId + '  ' + item.Name"
                        :value="item.WorkstationId">
                    </el-option>
                </el-select>              
            </div>   
        </div> -->
        <el-form ref="form" :model="editForm" class="header">
            <el-form-item label="领料单：" class="lingliaodan">
                <span class="sp"></span>
            </el-form-item>
            <el-form-item label="工单：" class="gongdan">
                <el-input v-model="editForm.OrderBagId" style="width:150px;"></el-input>
            </el-form-item>
            <el-form-item label="工位：" class="gongwei">
                <el-select v-model="editForm.WorkstationId" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in Workstationlist"
                        :key="index"
                        :label="item.Name"
                        :value="item.WorkstationId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table
                :data="editData"
                height="420px"
                ref="editData"  
                class="start-print"                                        
                style="width: 100%;">
                <el-table-column
                    type="index"
                    align="center" 
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="MaterialCode"
                     align="center" 
                    label="物料编码"
                    width="100">
                    <template slot-scope="scope">                       
                        <el-input v-model="scope.row.MaterialCode" disabled></el-input>               
                    </template>
                </el-table-column>
                <el-table-column
                    prop="MaterialName"
                     align="center" 
                    label="物料名称">
                    <template slot-scope="scope">                       
                        <el-input v-model="scope.row.MaterialName" disabled></el-input>               
                    </template>                   
                </el-table-column>
                <el-table-column
                    prop="Specification"   
                    align="center"           
                    label="规格">
                    <template slot-scope="scope">                       
                        <span class="sp" style="backgroundColor: #eee;">{{scope.row.Specification}}</span>
                    </template>                    
                </el-table-column>
                <el-table-column
                    prop="address"
                    align="center" 
                    label="单位">  
                    <template slot-scope="scope">
                        <span class="sp" style="backgroundColor: #eee;">{{scope.row.address}}</span>
                    </template> 
                </el-table-column>
                <el-table-column
                    prop="nuim"
                    align="center" 
                    label="单位数量">    
                    <template slot-scope="scope">                       
                        <span class="sp" style="backgroundColor: #eee;">{{scope.row.nuim}}</span>
                    </template> 
                </el-table-column>
                <el-table-column
                    prop="Quantity"
                     align="center" 
                    label="实际需求数">
                    <template slot-scope="scope">              
                        <el-input v-model="scope.row.Quantity"></el-input>               
                    </template>
                </el-table-column>
            </el-table>
        
        </div>
        
    </div>
</template>

<script>
import {updateRequisition,  //修改领料单
getMaterialRequisitionDOList, //工单信息
} from "@/api/picking"
import {getWorkStationList, //工位信息
}from "@/api/station"

export default {   
    props: {
      editData: {
        type: Array,
      },
      editForm: {
        type: Object,
      },
    },
    data(){
        return{

            OrderBagId:'',
            WorkstationId:'',

            Workstationlist:[],
            list:[],
            
        }
    },
    mounted(){
        this.onput()
    },
    methods:{
        // input(){
        //      getMaterialRequisitionDOList({keyName:'',page:1,pageSize:1000}).then(res => {
        //          if (parseInt(res.Code) === 1) {
        //             this.list = res.Result.Items;
        //         }
        //      })
        // },
        onput(){
            getWorkStationList({ keyName:'',page:1,pageSize:1000}).then(res => {
                if(parseInt(res.Code) === 1){
                    this.Workstationlist = res.Result.Items
                }
            })
        },
    }
}
</script>

<style lang="scss">
.start-print {
     /deep/  td{
  border: none !important;
  }
}
</style>

<style lang="scss" scoped>
.main{
    width: 97%;
    height: 300px;
    margin: 0 auto;
    .header{
        height: 50px;
        .lingliaodan{
            float:left;
            margin-left: 10px;
            width:180px;
            height: 40px;
            line-height: 40px;
            .sp{
                display:inline-block;
                width: 100px;
                height: 30px;
                background-color: #ccc;
                line-height: 30px;
                margin-top: 5px;
            }
        }
              
        .gongdan{
            float:left;
            margin-left: 40px;
            width:250px;
            height: 40px;
            line-height: 40px;
            .el-input{
                width: 100px;
            }
        }
            
        
        .gongwei{
            float:left;
            margin-left: 20px;
            width:225px;
            height: 40px;
            line-height: 40px;
            
            .el-select{
                width: 150px;
            }
        }
    }
    
    .table{
        float: left;
        width: 100%;
        margin-bottom: 20px;
        .el-table{
            width: 90%;
            float: left; 
            .sp{
                display:inline-block;
                width: 100px;
                height: 30px;
                line-height: 30px;

                // margin-top: 5px;
            }
        }         
    }
    // .skip{  
    //     float: left;          
    //     color: #0095FF;
    //     cursor:pointer;        
    // }   
}
</style>